<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="修改基本资料"
      width="30%"
      @close="closeDialog"
    >
      <el-form :model="form" ref="invoiceRef" :rules="infoRules" label-width="100px">
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input
            v-model="form.phonenumber"
            placeholder="请输入手机号码"
            :maxlength="11"
          />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入电子邮箱" :maxlength="30" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit(invoiceRef)"> 保 存 </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance } from 'element-plus';
import { putUserInfo } from "@/api/loginApi";

const props = defineProps({
  // 是否显示
  show: {
    type: Boolean,
    default: false,
  },
  // 个人信息
  form: {
    type: Object,
    default: () => ({}),
  },
});
const emits = defineEmits(["update:show", 'change']);
const dialogVisible = computed(() => props.show); // 控制弹窗显示

const invoiceRef = ref();
const infoRules = ref({
  phonenumber: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
});

// 关闭弹窗
const closeDialog = () => {
  emits("update:show", false);
};
const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      putUserInfo(props.form).then(() => {
        ElMessage.success("修改成功");
        closeDialog();
        emits('change');
      });
    }
  });
};
</script>
<style lang="less" scoped></style>
